<template>
<div>
  <div>
    <router-view/>
    <van-tabbar v-model="active" v-show="$route.meta.BathShow" active-color="#ee0a24" inactive-color="#000"  route>
      <van-tabbar-item replace to="/attention" icon="like">我的关注</van-tabbar-item>
      <van-tabbar-item replace to="/fire" icon="fire">热门店铺</van-tabbar-item>
      <van-tabbar-item replace to="/chatZ" icon="chat">聊天室</van-tabbar-item>
      <van-tabbar-item replace to="/collection" icon="star">我的收藏</van-tabbar-item>
    </van-tabbar>
    <van-nav-bar
        title=""
        left-text="Return"
        left-arrow
        @click-left="tzback()"
    />
    <van-search
        v-model="search"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
    >
    </van-search>
  </div>
  <div>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img class="img1" :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div>
    <van-dropdown-menu >
      <van-dropdown-item v-model="paixu1" :options="option1" @change="px1()"/>
      <van-dropdown-item v-model="paixu2" :options="option2" @change="px2()"/>
      <van-dropdown-item title="筛选" ref="item">
        <van-cell center title="洗浴中心">
          <template #right-icon>
            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="洗浴/汗蒸">
          <template #right-icon>
            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <div style="padding: 5px 16px;">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
<!--  消息滚动部分-->
  <div>
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
      >
        <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
        <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
        <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
  </div>
<!--  自定义div模块-->
  <div class="div1">
    <van-row v-for="m in messages"
    :storeName="m.name"
    :star="m.star"
    :price="m.price"
    :area="m.area"
    :type="m.type"
    :src="m.img"
    :message="m.message"
    @click="tzdetail(m.id)">
      <van-col offset="1" span="10">
        <van-image
            width="8rem"
            height="8rem"
            fit="cover"
            position="left"
            :src="m.img"
        />
      </van-col>
      <van-col span="13">
        <div>
<!--          水上人间-->
          <span class="store">{{m.name}}</span>
        </div>
        <div>
          <van-rate class="star1" :size="15" v-model="m.star" allow-half />
          <span class="score">{{m.star}}</span>
        </div>
        <div>
          <span class="price">￥{{m.price}}起</span>
        </div>
        <div>
<!--          高新区  洗浴/汗蒸-->
          <span class="area">{{m.area}}&nbsp;&nbsp;{{m.type}}</span>
        </div>
        <div class="review">
          <span >
            "{{ m.message}}"
          </span>
        </div>
      </van-col>
    </van-row>
  </div>
<!--  <div>-->
<!--    <van-row>-->
<!--      <van-col offset="1" span="10">-->
<!--        <van-image-->
<!--            width="8rem"-->
<!--            height="8rem"-->
<!--            fit="cover"-->
<!--            position="left"-->
<!--            src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"-->
<!--        />-->
<!--      </van-col>-->
<!--      <van-col span="8">-->

<!--      </van-col>-->
<!--    </van-row>-->
<!--  </div>-->
</div>
</template>

<script>

import { ref } from 'vue';
import { Toast } from 'vant';
export default {
  name: "Bath",
  data(){
    return{
      images:[
        'https://img.meituan.net/dpmobile/2cc031985609ce10b1c85b792a262436285320.png',
        'https://img2.baidu.com/it/u=484653787,1959969065&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=500',
      ],
      search:'',
      paixu1:0,//默认是0
      paixu2:4,
      ovalue1:0,
      ovalue2:4,
      option1:[
        { text: '全城', value: 0 },
        { text: '二七区', value: 1 },
        { text: '高新区', value: 2 },
      ],
      option2:[
        { text: '默认排序', value: 4 },
        { text: '高评优先', value: 5 },
        { text: '低价优先', value: 6 },
      ],
      item:null,
      switch1:false,
      switch2:false,
      //星星评分
      messages:[],
    }
    },
  methods:{
    onConfirm(){
      this.item.value.toggle();
    },
    onSearch(){
      this.axios.get("http://localhost:8081/api/messages/search.do?search="+this.search).then((response) => {
        console.log(response.data)
        //response.data 等同于R
        this.messages=response.data.data;
      })
    },
    onClickButton(){
      Toast(this.search.search)
  },
    // 下拉菜单的px1
    px1(){
      this.ovalue1=this.paixu1;
      console.log(this.ovalue1);
      console.log(this.ovalue2);
      if (this.ovalue1 === 2 && this.ovalue2 === 4){
        this.axios.get("http://localhost:8081/api/messages/selectEq.do?flag=2").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 1 && this.ovalue2 === 4){
        this.axios.get("http://localhost:8081/api/messages/selectEq.do?flag=1").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 1 && this.ovalue2 === 6){
        this.axios.get("http://localhost:8081/api/messages/selectByPriceDq.do?flag=1").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 2 && this.ovalue2 === 6){
        this.axios.get("http://localhost:8081/api/messages/selectByPriceDq.do?flag=2").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 1 && this.ovalue2 === 5){
        this.axios.get("http://localhost:8081/api/messages/selectByStarDq.do?flag=1").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 2 && this.ovalue2 === 5){
        this.axios.get("http://localhost:8081/api/messages/selectByStarDq.do?flag=2").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 0 && this.ovalue2 === 5){
        this.axios.get("http://localhost:8081/api/messages/selectByStar.do?").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 0 && this.ovalue2 === 6){
        this.axios.get("http://localhost:8081/api/messages/selectByPrice.do?").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else{
        this.axios.get("http://localhost:8081/api/messages/all.do").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }
    },

    // 下拉菜单的px1
    //防止错误放在这里
//     if (this.ovalue2 === 6){
//   this.axios.get("http://localhost:8888/api/messages/selectByPrice.do?").then((response) => {
//     console.log(response.data)
//     //response.data 等同于R
//     this.messages=response.data.data;
//   })
// }else if (this.ovalue2 === 5){
//   this.axios.get("http://localhost:8888/api/messages/selectByStar.do?").then((response) => {
//     console.log(response.data)
//     //response.data 等同于R
//     this.messages=response.data.data;
//   })
// }else
  px2(){
      this.ovalue2=this.paixu2;
      console.log(this.ovalue1);
      console.log(this.ovalue2);
    if (this.ovalue2 === 5 && this.ovalue1 === 0){
      this.axios.get("http://localhost:8081/api/messages/selectByStar.do?").then((response) => {
        console.log(response.data)
        //response.data 等同于R
        this.messages=response.data.data;
      })
    }else if (this.ovalue2 === 6 && this.ovalue1=== 0){
      this.axios.get("http://localhost:8081/api/messages/selectByPrice.do?").then((response) => {
        console.log(response.data)
        //response.data 等同于R
        this.messages=response.data.data;
      })
    }
    else if (this.ovalue2 === 4 && this.ovalue1=== 1){
      this.axios.get("http://localhost:8081/api/messages/selectEq.do?flag=1").then((response) => {
        console.log(response.data)
        //response.data 等同于R
        this.messages=response.data.data;
      })
    }else if (this.ovalue2 === 4 && this.ovalue1=== 2){
      this.axios.get("http://localhost:8081/api/messages/selectEq.do?flag=2").then((response) => {
        console.log(response.data)
        //response.data 等同于R
        this.messages=response.data.data;
      })
    }else if (this.ovalue1 === 1 && this.ovalue2 === 6){
        this.axios.get("http://localhost:8081/api/messages/selectByPriceDq.do?flag=1").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }else if (this.ovalue1 === 2 && this.ovalue2 === 6){
          this.axios.get("http://localhost:8081/api/messages/selectByPriceDq.do?flag=2").then((response) => {
            console.log(response.data)
            //response.data 等同于R
            this.messages=response.data.data;
          })
      }else if (this.ovalue1 === 1 && this.ovalue2 === 5){
            this.axios.get("http://localhost:8081/api/messages/selectByStarDq.do?flag=1").then((response) => {
              console.log(response.data)
              //response.data 等同于R
              this.messages=response.data.data;
            })
      }else if (this.ovalue1 === 2 && this.ovalue2 === 5){
          this.axios.get("http://localhost:8081/api/messages/selectByStarDq.do?flag=2").then((response) => {
                console.log(response.data)
                //response.data 等同于R
                this.messages=response.data.data;
              })
      }else{
        this.axios.get("http://localhost:8081/api/messages/all.do").then((response) => {
          console.log(response.data)
          //response.data 等同于R
          this.messages=response.data.data;
        })
      }
    },
    tzdetail(id){
    //跳转页面 传递参数 编程式路由 携带参数
    this.$router.push({path:"/bathDetail",query:{mid:id}});
  },tzback(){
      this.$router.push({path:"/"});
  }
  },
  // mounted(){
  //   var that=this;
  //   that.axios.get("http://localhost:8888/api/messages/all.do").then((response) => {
  //     console.log(response.data)
  //     //response.data 等同于R
  //     that.messages=response.data.data;
  //   })
  // },
  mounted(){
    var that=this;
      that.axios.get("http://localhost:8081/api/messages/all.do").then((response) => {
        console.log(response.data)
        //response.data 等同于R
        that.messages=response.data.data;
      })
    }
}
</script>

<style scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.img1{
  width: 100%;
  height: 8rem;
}
.store{
  padding-top: -10px;
  font-weight: bold;
  margin-right:8rem;
}
.star1{
  margin-right:6.3rem;
}
.score{
  font-size: 15px;
  color: coral;
  margin-right:10.3rem;
}
.price{
  font-size: 14px;
  margin-right:9rem;
}
.area{
  margin-right:5.3rem;
  font-size: 13px;
  color: dimgrey;
}
.review{
  width: 100%;
  color: dimgrey;
  font-size: 13px;
  margin-right:1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.div1{
  margin-top: 15px;
  height: 500px;
}
</style>
<!--setup() {-->
<!--const huakuai = ref(50);-->
<!--const value2 = ref([10, 50]);-->
<!--const onChange = (value) => Toast('当前值：' + value);-->
<!--return {-->
<!--value,-->
<!--value2,-->
<!--onChange,-->
<!--};-->
<!--},-->